@charset "utf-8";
@import "comm/reset";
@function p($px){
    @return $px/2+px;
}
.mobile{
    background: white;
    header{
        overflow: hidden;
        padding: 0 p(22);
        .but{
            margin-top: p(48);
            float: left;
            input{
                font-style:normal;
                width: p(123);
                height: p(57);
                border: 1px solid #FF9344;
                border-radius: p(18);
                background: white;
                font-size: p(26);
            }
        }
        .cet{
            width: p(52);
            margin: 0 auto;
            margin-top: p(63);
            h1{
                display: inline-block;
                font-size: p(26);
                font-family: "微软雅黑";
            }
        }
        .sel{
            float: right;
            margin-top: p(47);
            width: p(163);
            height: p(60);
            border: p(3) solid #FF9344;
            position: relative;
            // 清除select框的默认样式
            select{
                border: none;
             /*将默认的select选择框样式清除*/
               appearance:none;
               -moz-appearance:none;
               -webkit-appearance:none;
               background: transparent;
               width: 100%;
               height: 100%;
               padding-left: p(14);
            }
            /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
            select::-ms-expand { display: none; }
            &::after{
                position: absolute;
                top: p(22);
                right: p(11);
                content: "";
                width: 0;
                height: 0;
                display: block;
                border-top: p(16) solid #FF9344;
                border-left: p(16) solid transparent;
                border-right: p(16) solid transparent;
            }
        }
    }
    section{
        margin-bottom: p(141);
        .search{
            width: p(268);
            height: p(55);
            border-radius: p(22);
            border: 1px solid #ff9344;
            margin: 0 auto;
            margin-top: p(51);
            input[type="text"]{
                width: p(171);
                height: p(45);
                vertical-align: middle;
                border: none;
                margin-left: p(28);
                font-size: p(24);
                margin-top: p(5);
            }
            input[type="image"]{
                width: p(36);
                height: p(34);
                vertical-align: middle;
                margin-left: p(15);
            }
        }
        .all{
            padding: 0 p(24);
            margin-top: p(31);
            h1{
                text-align: center;
                font-size: p(26);
                display: block;
            }
            ul{
                width: p(513);
                margin: 0 auto;
                font-size: 0;
                margin-top: p(14);
                li{
                    width: p(124);
                    height: p(64);
                    display: inline-block;
                    background: #dcdcdc;
                    text-align: center;
                    line-height: p(64);
                    margin-bottom: p(3);
                    margin-left: p(4);
                    a{
                        font-size: p(20);
                        color: #898989;
                    }
                }
                li:hover{
                    background: lightskyblue;                
                    transition:1s;
                    transform-style:preserve-3d;
                    transform:rotateX(360deg);
                }
                li:hover a{
                    color: white;
                }
            }
        }
        .hot{
            padding: 0 p(22);
            overflow: hidden;
            .hot-top{
                margin-top: p(38);
                padding: 0 p(22);
                .hot-top-lt{
                    width: p(184);
                    img{
                        width: p(32);
                        height: p(45);
                        vertical-align: middle;
                    }
                    h1{
                        margin-left: p(24);
                        display: inline-block;
                        font-size: p(30);
                        vertical-align: middle;
                    }
                }
                .hot-top-rt{
                    float: right;
                    h2{
                        display: inline-block;
                        font-size: p(24);
                        margin-right: p(8);
                    }
                    img{
                        width: p(25);
                        height: p(26);
                    }
                }
            }
            .hot-bt{
                margin-top: p(32);
                overflow: hidden;
                .hot-bt-lt{
                    width: 39%;
                    height: p(352);
                    float: left;
                    overflow: hidden;
                    a{
                        width: 35%;
                        height: p(352);
                        img{
                            height: 100%;
                        }
                    }
                }
                .hot-bt-rt{
                    width: 59%;
                    height: p(352);
                    overflow: hidden;
                    float: right;
                    .hot-rt-tp{
                        width: 100%;
                        height: 29%;
                        overflow: hidden;
                        a{
                            img{
                                width: 100%;
                            }
                        }
                    }
                    .hot-rt-bt{
                        height: 69%;
                        margin-top: 2%;
                        overflow: hidden;
                        .hot-bt2-lt{
                            float: left;
                            width: 49%;
                            overflow: hidden;
                            height: 100%;
                            a{
                                position: relative;
                                display: inline-block;
                                width: 100%;
                                height: 100%;
                                img{
                                    position: absolute;
                                    top: -999px;
                                    left: -999px;
                                    bottom: -999px;
                                    right: -999px;
                                    margin:auto;
                                    height: 100%;
                                }
                            }
                        }
                        .hot-bt2-rt{
                            float: right;
                            width: 49%;
                            height: 100%;
                            overflow: hidden;
                            a{
                                position: relative;
                                display: inline-block;
                                width: 100%;
                                height: 100%;
                                img{
                                    position: absolute;
                                    top: -999px;
                                    left: -999px;
                                    bottom: -999px;
                                    right: -999px;
                                    margin:auto;
                                    height: 100%;
                                }
                            }
                        }
                    }
                }
            }
        }
        .reco{
            margin-top: p(48);
              .reco-top{
                padding: 0 p(22);
                .reco-top-lt{
                    width: p(186);
                    img{
                        width: p(42);
                        height: p(38);
                        vertical-align: middle;
                    }
                    h1{
                        margin-left: p(24);
                        display: inline-block;
                        font-size: p(30);
                        vertical-align: middle;
                    }
                }
                .reco-top-rt{
                    float: right;
                    h2{
                        display: inline-block;
                        font-size: p(24);
                        margin-right: p(8);
                    }
                    img{
                        width: p(25);
                        height: p(26);
                    }
                }
            }
            .reco-bt{
                margin-top: p(48);
                padding: 0 p(20);
                .reco-bt-img{
                    width: 32%;
                    display: inline-block;
                    a{
                        width: p(211);
                        height: p(200);
                        img{
                            vertical-align: top;
                            width: 100%;
                        }
                    }
                }
            }
        }
    }
}
